 <template>
    <div class="container-fluid container-med2" style="width:1200px; ">
        <el-form class="el2" ref="form"  label-width="80px">
            <h1>查看实验</h1>
        <div style="width:1000px">
        <el-form-item label="实验题目:">
            {{form.title}}
        </el-form-item>
        <el-form-item label="实验目的:" >
            {{form.purpose}}
        </el-form-item>  
        <el-form-item label="实验内容:">
            {{form.content}}
        </el-form-item>
        <el-form-item label="实验步骤:"  >
            <p v-for="item in stepData">
            {{ item }}
            </p>
        </el-form-item>
        <el-form-item label="发布时间:">
            {{form.startDate}}
        </el-form-item>
        <el-form-item label="截止时间:">
            {{form.endDate}}
        </el-form-item>
        <el-form-item label="备注:">
            {{form.desc}}
        </el-form-item>
        </div>
        <el-button type="primary" @click="back">返回</el-button>
        </el-form>
    </div>
</template>  
<script>

import axios from 'axios'
  export default {

    data() {
      return {
          stepData:[],
          form: {
              title:'',
              purpose: '',
              content: '',
              step:[],
              beginDate: '',
              endBate: '',
              desc: ''
          },
          addForm:{
              name: '',
              judge: -1,
          },
          fileList: [{
                name: '',url: ''}]
          };
        },
    mounted:function () {
           var params = new URLSearchParams();
           params.append('title',this.$route.query.title)
           var _this = this;
           axios.post('/experiment/getExperiment',params).then(function(res){
               res.data.getEx.startDate=res.data.getEx.startDate.substring(0,10);
               res.data.getEx.endDate=res.data.getEx.endDate.substring(0,10);
               res.data.getEx.step=res.data.getEx.step[0].split(',')
               //下面是你的编辑内容，没有特殊问题的话就
//                _this.form=res.data.getEx

               _this.form.title=res.data.getEx.title;
               _this.form.purpose=res.data.getEx.purpose;
               _this.form.content = res.data.getEx.content;
               _this.stepData= res.data.getEx.step;
               _this.form.startDate = res.data.getEx.startDate;
               _this.form.endDate = res.data.getEx.endDate;
               _this.form.desc = res.data.getEx.remark;

//             _this.form.accessory = res.data.accessory;
               //设置好对应的名字就好
               //最后记得把form里面的内容全部删掉
            //    console.log(res.data.getEx.step)
            //    console.log(res.data.getEx)
               
            //    console.log(res.data.getEx.step)
           })
        },
    methods: {
        
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        onSubmit() {
            console.log('submit!');
        },
        back() {

            this.$confirm('是否返回?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                });
                this.$router.go(-1);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已返回'
                });
            });

        },

/*        handleAdd: function () {
            dialogTableVisible: false,
            this.addForm = {
                name: '',
                judge: -1,
            };
        },*/
/*        addSubmit: function () {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this.addLoading = true;
                        //NProgress.start();
                        let para = Object.assign({}, this.addForm);
                        addUser(para).then((res) => {
                            this.addLoading = false;
                            //NProgress.done();
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.$refs['addForm'].resetFields();
                            this.addFormVisible = false;
                            this.getUsers();
                        });
                    });
                }
            });
        },*/
    },


  }
</script>

<style>
.container-med2{
    margin-top: 160px;
    margin: 0 auto ;
    -webkit-box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
    box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
  }
.el2{
    padding-top: 20px;
    padding-right: 70px;
    padding-left: 70px;
    padding-bottom: 50px;
}
.el2 el-form-item{
    font-size: 50px;
}

</style>